<template>
  <div>
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple" style="margin-top: 70px">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                   class="demo-ruleForm">
            <el-form-item label="会议室号" prop="room">
              <el-input type="text" v-model="ruleForm.room" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="会议室位置" prop="position">
              <el-input type="text" v-model="ruleForm.position" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="会议室容量" prop="lager">
              <el-input v-model.number="ruleForm.lager"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>

        </div>
      </el-col>
      <el-col :span="13" :offset="1">
        <div class="grid-content bg-purple-light" style="margin-top: 50px">
          <template>
            <el-table
              height="420"
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="room"
                label="会议室号">
              </el-table-column>
              <el-table-column
                prop="position"
                label="会议室具体位置">
              </el-table-column>
              <el-table-column
                prop="lager"
                label="会议室容量">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑
                  </el-button>
                  <br>
                  <br>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>

        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="7" :offset="12">
        <div class="pagenation">
          <el-pagination
            small
            layout="prev, pager, next"
            :total="total"
            :page-size="page_size"
            @prev-click="prevfun"
            @next-click="nextfun"
            @current-change="currentchange"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="修改会议室" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="会议室号" :label-width="formLabelWidth">
          <el-input v-model="form.room" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会议室位置" :label-width="formLabelWidth">
          <el-input v-model="form.position" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会议室容量" :label-width="formLabelWidth">
          <el-input v-model.number="form.lager" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editConference">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'CreateConferenceView',
    data () {
      var room = (rule, value, callback) => {
        if (!value || value === '') {
          return callback(new Error('会议室号不能为空'))
        }
        callback()

      }
      var position = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入会议室详细位置'))
        }
        callback()

      }
      var lager = (rule, value, callback) => {
        if (!value || value === '') {
          callback(new Error('会议室最大容量不能为空'))
        }
        callback()

      }
      return {
        dialogFormVisible: false,
        row: '',
        form: {
          position: '',
          lager: ''
        },
        formLabelWidth: '100px',
        total: 5, //先设置给初始值，只给空字符串''会报typeerror
        current_page: 1,
        page_size: 1,
        ruleForm: {
          room: '',
          position: '',
          lager: ''
        },
        tableData: [],
        rules: {
          room: [
            {
              validator: room,
              trigger: 'blur'
            }
          ],
          position: [
            {
              validator: position,
              trigger: 'blur'
            }
          ],
          lager: [
            {
              validator: lager,
              trigger: 'blur'
            }
          ]
        }
      }
    },
    mounted () {
      this.get_data()
    },
    methods: {
      //提交
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios({
              url: this.$settings.base_url + '/user/conference/',
              method: 'post',
              data: this.ruleForm
            }).then(res => {
              if (res.data.code === 100) {
                this.$message.success('创建会议室成功')
                this.get_data(this.current_page)
                this.ruleForm = {
                  room: '',
                  position: '',
                  lager: '',
                  id:''
                }
                this.resetForm('ruleForm')
              } else {
                this.$message.error(res.data.error)
              }
            }).catch(error => {
              console.log(error)
              this.$message.error('创建失败，未知错误')
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      //重置
      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      //修改会议室
      handleEdit (index, row) {
        this.form.room = row.room
        this.form.lager = row.lager
        this.form.id = row.id
        this.form.position=row.position
        this.dialogFormVisible = true
      },
      editConference () {
        this.$axios({
          url: this.$settings.base_url + `/user/conference/`,
          method: 'patch',
          data: this.form
        }).then(res => {
          if (res.data.code === 100) {
            this.dialogFormVisible = false
            this.get_data(this.current_page)
            this.$message.success('修改成功')
            this.form = {
              position: '',
              lager: ''
            }
          }else {
            this.$message.error(res.data.error)
          }
        })
      },

      //删除会议室
      handleDelete (index, row) {
        this.$confirm('确定永久删除该数据？').then(_ => {
          this.$axios({
            url: this.$settings.base_url + `/user/conference/?id=${row.id}`,
            method: 'delete'
          }).then(res => {
            if (res.data.code === 100) {
              this.$message.success('删除成功')
              this.get_data(this.current_page)
            } else {
              this.$message.error('删除失败')
            }
          })
        }).catch(_ => {
        })

      },
      get_data (page = 1) {
        this.$axios({
          url: this.$settings.base_url + '/user/conference/?page=' + page,
          method: 'get',
        }).then(res => {
          this.tableData = res.data.results
          this.total = res.data.count
          this.page_size = res.data.page_size

        })
      },
      //分页器的三个函数
      prevfun (value) {
        //value拿到的当前的页码
        this.get_data(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_data(value)
      },
      currentchange (value) {
        this.get_data(value)
        this.current_page = value

      },
    }
  }
</script>

<style scoped>

</style>
